import React, {Component} from "react";
import {inject, observer} from "mobx-react";
import {withRouter} from "react-router-dom";
import {SearchBar, Icon, Tools} from "weaver-mobile";
import {ListViewPage, SearchAdvanced} from "weaver-mobile-page";
import {Menu} from "weaver-mobile";
import * as Tm from "../template";
import {getUrlParams} from "../../util"

const getLabel = Tools.getLabel;

@inject("taskStore")
@withRouter
@observer
export default class Task extends Component {
    componentDidMount() {
        const {location, taskStore: {init}} = this.props;
        const {taskState, progress,fresh} = getUrlParams(location.search);
        init(taskState, progress,fresh);
    }

    openAdvancedForm = () => {
        const {history, taskStore: {searchAd}} = this.props;
        history.push(searchAd.path);
    };

    render() {
        const taskOptions = [
            {
                label: getLabel("33103", "任务执行"),
                value: 0,
            }, {
                label: getLabel("500803", "任务审批"),
                value: 1,
            }, {
                label: getLabel("30889", "全部任务"),
                value: 2,
            }
        ];

        const checkOptions = [
            {
                label: getLabel("332", "全部"),
                value: 0
            }, {
                label: getLabel("1979", "未开始"),
                value: 1
            }, {
                label: getLabel("25007", "进行中"),
                value: 2
            }, {
                label: getLabel("2244", "延期"),
                value: 3
            }, {
                label: getLabel("679", "近期"),
                value: 4
            }, {
                label: getLabel("19173", "里程碑"),
                value: 5
            },
        ];

        const {
            history,
            taskStore: {
                listAd, searchValue, changeSearchValue, onSearch, searchAd, conditionReady,onSearchAdvancedChange,onReset,
                show1, changeShow1, show2, changeShow2, chooseVal1, chooseVal2, val1, val2, approve, refuse
            }
        } = this.props;
        const menuEl = (
            <Menu
                className="single-foo-menu"
                data={taskOptions}
                value={[val1]}
                level={1}
                height={"100%"}
                onChange={(v) => chooseVal1(v, history)}
            />
        );
        const menuEl2 = (
            <Menu
                className="single-foo-menu"
                data={checkOptions}
                value={[val2]}
                level={1}
                height={"100%"}
                onChange={(v) => chooseVal2(v, history)}
            />
        );

        return (
            <div>
                <SearchBar
                    className="search-select"
                    placeholder="Search"
                    value={searchValue}
                    onChange={(val) => changeSearchValue(val)}
                    onSubmit={() => onSearch()}
                    onClear={() => {
                        changeSearchValue();
                        onSearch();
                    }}
                    showExtraButton
                    extraButton={[
                        {
                            key: "advanced",
                            show: conditionReady ?
                                <Icon key="filter-o-hot" type="filter-o-hot" className={"advanced-ready"}/> :
                                <Icon key="filter-o" type="filter-o"/>
                        },
                    ]}
                    onExtraButtonClick={(key) => this.openAdvancedForm()}
                />
                <SearchAdvanced
                    store={searchAd}
                    onSubmit={() => onSearch(false)}
                    onChange={onSearchAdvancedChange}
                    onReset={onReset}
                />
                <div className='proj-tool-box-task'>
                    <button className={show1 ? "proj-btn-checking" : val1 !== 2 ? "proj-btn-checked" : "proj-btn-check"}
                            onClick={() => changeShow1()}>
                        <span>{taskOptions[val1]["label"]}</span>&nbsp;
                        <Icon key="down" size="xxs" type={show1 ? "up" : "down"}/>
                    </button>
                    <button className={show2 ? "proj-btn-checking" : val2 !== 0 ? "proj-btn-checked" : "proj-btn-check"}
                            onClick={() => changeShow2()}>
                        <span>{checkOptions[val2]["label"]}</span>&nbsp;
                        <Icon key="down" size="xxs" type={show2 ? "up" : "down"}/>
                    </button>
                </div>

                {show1 ? menuEl : null}
                {show1 ? <div className="menu-mask" onClick={() => changeShow1()}/> : null}
                {show2 ? menuEl2 : null}
                {show2 ? <div className="menu-mask" onClick={() => changeShow2()}/> : null}

                <div>
                    <ListViewPage.Normal
                        rowKey="id"
                        store={listAd}
                        heightSpace={ window.getThemeVars ? window.getThemeVars()["tab-bar-height"] : 50 }
                        getTemplate={val1 === 0 ? Tm.getTaskListTemplateWithoutMan : Tm.getTaskListTemplate}
                        onRowClick={(item) => {
                            history.push(`/index/task${this.props.location.search}&fresh=no`)
                            history.push(`/TaskDetails/0/${item.id}`)
                        }}
                        // getRowProps={this.getRowProps}
                        withSwipeAction={val1 === 1}
                        swipeActionProps={{
                            autoClose: true,
                            right: [{
                                text: getLabel("142", "批准"),
                                style: {backgroundColor: "#4dacfa", color: "#fff", padding: "0 8px"},
                                onPress: (data) => {
                                    approve(data.id)
                                },
                            },
                                {
                                    text: getLabel("236", "退回"),
                                    style: {backgroundColor: "#f4333c", color: "#fff", padding: "0 8px"},
                                    onPress: (data) => {
                                        refuse(data.id)
                                    },
                                }]
                        }}
                    />
                </div>
            </div>
        );
    }
}
